<template>
    <div>
        <Breadcrumb name1="订单管理" name2="订单列表"></Breadcrumb>
        <el-card>
            <div class="search">
                <el-input placeholder="请输入内容" v-model="searchKeyword" clearable @clear="search">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
            <div>
                <el-table :data="orderList" border stripe>
                    <el-table-column type="index" label="#"></el-table-column>
                    <el-table-column prop="order_number" label="订单编号"></el-table-column>
                    <el-table-column prop="order_price" label="订单价格"></el-table-column>
                    <el-table-column label="是否付款">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.pay_status==0 ? 'danger':'success'">
                                {{scope.row.pay_status==0 ? "未付款":"已付款"}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="is_send" label="是否发货"></el-table-column>
                    <el-table-column prop="create_time" label="下单时间"></el-table-column>
                    <el-table-column label="操作" width="130px">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="addressChangebtn(scope.row)"></el-button>
                            <el-button type="success" icon="el-icon-location" size="mini" @click="d()"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <pagination
                    @handleSizeChange="handleSizeChange" 
                    @handleCurrentChange="handleCurrentChange"
                    :totalRecords="total">
                </pagination>
            </div>
        </el-card>

        <!-- 修改地址的对话框 -->
        <el-dialog title="修改地址"
            :visible.sync="addressChangeDialog"
            width="50%"
            @close="addressChangeDialogClosed"
            append-to-body>
            <el-form :model="addressForm" :rules="addressFormRules" 
            ref="addressFormRef" label-width="100px">
                <el-form-item label="省市区县" prop="address1">
                    <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="addressForm.address2"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addressChangeDialog = false">取 消</el-button>
                <el-button type="primary" @click="addressChange">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../api/axios'
import Breadcrumb from "../components/Breadcrumb.vue"
import cityData from './citydata.js'
export default {
    components:{ Breadcrumb },
    data(){
        return{
            orderInfo: {
                query: '',
                pagenum: 1,
                pagesize: 5,
            },
            orderList:[],
            total: 0,

            // 搜索框输入关键词
            searchKeyword:"",

            // 修改地址对话框的显示与隐藏
            addressChangeDialog:false,

            // 城市列表数据
            cityData: cityData,
            // 选择地址的表单数据
            addressForm:{
                address1: [],
                address2: ''
            },
            addressFormRules: {
                address1: [
                    { required: true, message: '请选择省市区县', trigger: 'blur' }
                ],
                address2: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ]
            },
        }
    },
    created(){
        this.getOrderList()
    },
    methods:{
        getOrderList(){
            request("get","orders",this.orderInfo)      //1.10.1
            .then( res => {
                console.log(res)
                this.orderList = res.data.goods
                this.total = res.data.total
            })
        },

        // 搜索查询
        search(){
            this.orderInfo.query=this.searchKeyword
            this.getOrderList()
        },

        // 分页
        handleSizeChange(val) {
            this.orderInfo.pagesize = val
            this.getOrderList();
        },
        //翻页
        handleCurrentChange(val) {
            this.orderInfo.pagenum = val
            this.getOrderList();
        },

        // 修改地址
        addressChangebtn(){
            this.addressChangeDialog=true
        },
        addressChange(){
            // 
        },
        addressChangeDialogClosed(){
            this.$refs.addressFormRef.resetFields()
        }
    }
}
</script>

<style scoped>
.search .el-input{
    width: 40%;
    margin-right: 20px;
}
.el-table{
    margin-top: 15px;
}
</style>